@keyframes turnBorder {
    0% {
        border-left-color  : rgba(102, 153, 255, .5);
        border-top-color   : rgba(46, 139, 87, .5);
        border-right-color : rgba(255, 255, 102, .5);
        border-bottom-color: rgba(255, 99, 71, .5);
    }

    25% {
        border-top-color   : rgba(102, 153, 255, .5);
        border-right-color : rgba(46, 139, 87, .5);
        border-bottom-color: rgba(255, 255, 102, .5);
        border-left-color  : rgba(255, 99, 71, .5);
    }

    50% {
        border-right-color : rgba(102, 153, 255, .5);
        border-bottom-color: rgba(46, 139, 87, .5);
        border-left-color  : rgba(255, 255, 102, .5);
        border-top-color   : rgba(255, 99, 71, .5);
    }

    75% {
        border-bottom-color: rgba(102, 153, 255, .5);
        border-left-color  : rgba(46, 139, 87, .5);
        border-top-color   : rgba(255, 255, 102, .5);
        border-right-color : rgba(255, 99, 71, .5);
    }

    100% {
        border-left-color  : rgba(102, 153, 255, .5);
        border-top-color   : rgba(255, 255, 102, .5);
        border-right-color : rgba(46, 139, 87, .5);
        border-bottom-color: rgba(255, 99, 71, .5);
    }
}

@keyframes btnBling {
    0% {
        background-color: #FF7F50;
    }

    50% {
        background-color: #CD919E;
    }

    100% {
        background-color: #FF7F50;
    }
}
@keyframes turnTheWrap {
    0% {
        transform: rotateX(0deg);
    }
    100% {
        transform: rotateX(15deg);
    }
}
.cover {
    padding-top: 120px;
    margin     : 0 auto;
    text-align : center;
}

.cover-title {
    font-size     : 35px;
    text-align    : center;
    color         : #fff;
    letter-spacing: 25px;
}

.cover-ball-wrap {
    position : relative;
    width    : 800px;
    height   : 200px;
    margin   : 80px auto 0;
    border   : 2px solid;
    animation: turnBorder 1s steps(1) infinite;
}

.cover-ball {
    position        : absolute;
    top             : 43%;
    left            : 49%;
    width           : 30px;
    height          : 30px;
    background-image: linear-gradient(to right, rgba(153, 255, 255, .9), rgba(204, 255, 204, .3));
    border-radius   : 50%;
}

.game-rule {
    letter-spacing: 2px;
    margin        : 80px auto;
    text-align    : center;
    color         : #99ffff;
}

.iconfont {
    padding         : 10px;
    background-color: #FF7F50;
    border-radius   : 50%;
    animation       : btnBling 1s steps(1) infinite;
}

.start-game-btn {
    background-image: linear-gradient(to right bottom, #7FFFD4, #EE6AA7);
    border          : 0;
    width           : 120px;
    height          : 50px;
    line-height     : 50px;
    color           : #cc0000;
    cursor          : pointer;
}

.game-wrap {
    display: none;
    position          : relative;
    width             : 100%;
    height            : 100%;
    border            : 5px solid transparent;
    border-top-color  : #EEEE00;
    border-left-color : #DC143C;
    border-right-color: #00FFFF;
    transform-style: preserve-3d;
    animation: turnTheWrap 3s linear infinite alternate;
}

.ball {
    position        : absolute;
    top             : 30%;
    left            : 45%;
    width           : 20px;
    height          : 20px;
    background-color: pink;
    border-radius   : 50%;
}

.wall {
    position        : absolute;
    bottom          : 0;
    left            : 48%;
    width           : 100px;
    height          : 5px;
    background-image: linear-gradient(to bottom, #99ff66, #EEEED1);
}
.block {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 80px;
    height: 20px;
    background-color: #fff;
    border-radius: 20px;
}